import Icon from '@/components/Icon'
import Tabs from '@/components/Tabs'
import { getAllChannels, getUserChannels } from '@/store/actions/home'
import { Drawer } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useDispatch } from 'react-redux'
import { useSelector } from 'react-redux'
import Channels from './components/Channels'
import ArticleList from './components/ArticleList'
import styles from './index.module.scss'
import FeedbackActionMenu from './components/MoreAction'

export default function Home() {
  const tabs = useSelector((state) => state.home.userChannel)
  const dispatch = useDispatch()
  const [open, setOpen] = useState(false)
  // 控制高亮
  const [active, setActive] = useState(0)

  const close = () => {
    return setOpen(false)
  }
  // 改变高亮
  const changeActive = (e) => setActive(e)
  useEffect(() => {
    dispatch(getUserChannels())
    dispatch(getAllChannels())
  }, [dispatch])

  return (
    <div className={styles.root}>
      <Tabs tabs={tabs} index={active} onChange={changeActive}>
        {tabs.map((item) => (
          <ArticleList
            key={item.id}
            channelId={item.id}
            aid={tabs[active].id}
          ></ArticleList>
        ))}
      </Tabs>

      {/* 右侧按钮 */}
      <div className="tabs-opration">
        <Icon type="iconbtn_search" />
        <Icon type="iconbtn_channel" onClick={() => setOpen(true)} />
      </div>

      {/* 抽屉组件展现频道列表 */}
      <Drawer
        className="my-drawer"
        open={open}
        sidebar={
          <Channels
            tabActiveIndex={active}
            onChange={changeActive}
            onClose={close}
          />
        }
        children={''}
      ></Drawer>

      {/* 反馈拉黑 */}
      <FeedbackActionMenu />
    </div>
  )
}
